<template>
  <view class="">
    <view class="header">
      <!-- 用户信息 -->
      <view class="author">
        <view class="avatar">
          <image :src="imgdetail.user.avatar" mode="widthFix"></image>
        </view>
        <view class="username">
          {{ imgdetail.user.name }}
        </view>
        <view class="nowtime">{{ imgdetail.preTime }}</view>
      </view>
    </view>
    <view class="bigimg">
      <swiper-dir @logdir="handleDir" class="swiperdir">
        <image :src="imgdetail.thumb" mode="widthFix"></image>
      </swiper-dir>
      <view class="user_rank">
        <view class="iconfont icondianzan rank">{{ imgdetail.rank }}</view>
        <view class="iconfont iconshoucang collect">收藏</view>
      </view>
    </view>
    <!--  最热评论 -->
    <view class="comment" v-if="hots.length">
      <view class="title">
        <text class="iconfont iconhot1">最热评论</text>
      </view>
      <view class="list_item" v-for="val in hots" :key="val.id">
        <view class="hot_author">
          <view class="hot_avatar">
            <image :src="val.user.avatar" mode="widthFix" />
          </view>
          <view class="hot_user">
            <view class="name">{{ val.user.name }}</view>
            <view class="ago">{{ val.atime | ago }}</view>
          </view>
          <view class="badge" v-if="val.user.title">
            <image
              :src="item.icon"
              mode="widthFix"
              v-for="item in val.user.title"
              :key="item.icon"
            />
          </view>
        </view>
        <view class="content">
          <view class="text">{{ val.content }}</view>
          <view class="iconfont icondianzan">{{ val.size }}</view>
        </view>
      </view>
    </view>
    <!-- 最新评论 -->
    <view class="comment" v-if="comments.length">
      <view class="title">
        <text class="iconfont iconpinglun">最新评论</text>
      </view>
      <view class="list_item" v-for="val in comments" :key="val.id">
        <view class="hot_author">
          <view class="hot_avatar">
            <image :src="val.user.avatar" mode="widthFix" />
            <view class="hot_user">
              <view class="name">{{ val.user.name }}</view>
              <view class="ago">{{ val.atime | ago }}</view>
            </view>
          </view>

          <view class="badge" v-if="val.user.title">
            <image
              :src="item.icon"
              mode="widthFix"
              v-for="item in val.user.title"
              :key="item.icon"
            />
          </view>
        </view>
        <view class="content">
          <view class="text">{{ val.content }}</view>
          <view class="iconfont icondianzan">{{ val.size }}</view>
        </view>
      </view>
    </view>
    <!-- 下载 -->
    <view class="download">
      <button class="dl_btn" @click="handleDownload">下载图片</button>
    </view>
  </view>
</template>

<script>
import moment from "moment";
import SwiperDir from "components/common/SwiperItem";
//设置moment语言为中文
moment.locale("zh-cn");
export default {
  name: "",
  components: {
    SwiperDir,
  },
  data() {
    return {
      imgdetail: {},
      albums: [],
      hots: [],
      comments: [],
      //图片的索引
      imgIndex: 0,
    };
  },
  onLoad() {
    const { imgIndex } = getApp().globalData;
    this.imgIndex = imgIndex;
    this.getData();
    //有数据的额时候再做拼接
    /*  this.imgdetail.newThumb =
      this.imgdetail.thumb + this.imgdetail.rule.replace("$<Height>", 360); */
  },
  methods: {
    getData() {
      const { imgList } = getApp().globalData;
      this.imgdetail = imgList[this.imgIndex];

      //距离现在的时间
      this.imgdetail.preTime = moment(this.imgdetail.atime * 1000).fromNow();
      this.getComment(this.imgdetail.id);
    },
    getComment(id) {
      this.$request({
        url:
          "http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/" +
          id +
          "/comment",
      }).then((res) => {
        const ress = res.data.res;
        // console.log(ress);
        this.albums = ress.album;
        this.hots = ress.hot;
        this.comments = ress.comment;
      });
    },

    async handleDownload() {
      //将文件下载到小程序的内存中

      const res = await uni.downloadFile({
        url: this.imgdetail.img,
      });
      uni.showLoading({
        title: "下载中",
      });
      const { tempFilePath: tempPath } = res[1];
      uni.saveImageToPhotosAlbum({
        filePath: tempPath,
        success() {
          console.log("下载成功");
          uni.hideLoading();
          uni.showToast({
            title: "下载成功",
            duration: 2000,
          });
        },
      });
    },
    handleDir(dir) {
      //左滑index++
      //右--
      console.log(dir);
      const { imgList, imgIndex } = getApp().globalData;
      if (dir === "left" && this.imgIndex < imgList.length - 1) {
        this.imgIndex++;
        this.getData();
      } else if (dir === "right" && this.imgIndex > 0) {
        this.imgIndex--;
        this.getData();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none",
        });
      }
    },
  },
  filters: {
    ago(val) {
      return moment(val * 1000).fromNow();
    },
  },
};
</script>
<style lang="scss" scoped>
.author {
  display: flex;
  padding: 34rpx 20rpx;
  .avatar {
    margin-right: 26rpx;
    position: relative;
    image {
      width: 82rpx;
      height: 82rpx;
      border-radius: 50%;
      vertical-align: middle;
    }
  }

  .username {
    font-size: 30rpx;
    color: black;
  }

  .nowtime {
    position: absolute;
    top: 83rpx;
    left: 128rpx;
    font-size: 23rpx;
  }
}
.bigimg {
  border-bottom: 2rpx solid #ececee;
  .swiperdir {
    border-bottom: 2rpx solid #ececee;
  }
  .user_rank {
    display: flex;
    justify-content: center;
    padding: 18rpx;
    .rank {
      flex: 1;
      text-align: center;
    }

    .collect {
      flex: 1;
      text-align: center;
    }
  }
}
.comment {
  .title {
    padding: 22rpx 0 0 13rpx;
    text.iconfont.iconhot1 {
    }
  }

  .list_item {
    padding: 36rpx 10rpx;
    border-bottom: 5rpx solid #eceeee;
    .hot_author {
      /*  position: relative; */
      display: flex;
      justify-content: space-between;
      .hot_avatar {
        display: flex;
        /*     padding: 0 68rpx; */
        image {
          display: inline-block;
          width: 60rpx;
          height: 60rpx;
        }
        .hot_user {
          /*  flex-direction: column;
          align-items: flex-start; */
          margin-left: 19rpx;
          .name {
            font-size: 26rpx;
          }

          .ago {
            font-size: 24rpx;
          }
        }
      }

      .badge {
        /* position: absolute;
        top: 9rpx;
        right: 18rpx; */

        image {
          display: inline-block;
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 23rpx;
      .text {
        padding-left: 78rpx;
        font-size: 33rpx;
        color: black;
      }
      .iconfont {
      }
    }
  }
}
.download {
  padding: 60rpx 26rpx;
  .dl_btn {
    background-color: rgb(247, 112, 135);
    color: white;
  }
}
</style>
